<template>
  <div>
    <!-- 接收文件列表 -->
    <el-dialog
        title=""
        :visible.sync="showReceiveList"
        center
        :custom-class="'successCode-dialog'"
        :modal="false"
        width="520px"
        :close-on-click-modal="false"
        @close="handleClose"
        >
        <div class="success-content-box">
          <span class="mes1" v-if="type == 1">我接收到的文件</span>
          <span class="mes1" v-else>取件码为 {{code}} 的文件列表</span>

          <!-- <span class="mes2">文件有效期剩余：3？？？天</span> -->
          <span class="receiveWarning" v-if="type == 1">
            文件由【IP属地中国大陆】的用户上传。请确保您信任文件的上传者，并知道这些文件是做什么的，否则不要下载！如果文件有害或违法，
            请向我们举报<span>   举报邮箱 ：test@163.com</span>。
          </span>
          <avue-crud class="receiteList-box"
            v-if="receiveFileList && receiveFileList.length > 0"
            :option="fileListOption"
            :data="receiveFileList"
            @selection-change="selectionChange"
            ref="crud"
            >
            <template slot="menuLeft">
              <!-- 有权限区分 -->
              <el-button
                type="text"
                size="small"
                v-if="type == 1 && selectList && selectList.length > 0"
                @click="handleDownload(1)"
              >
                下载选中文件
              </el-button>
            </template>
            <template slot-scope="{row}" slot="menu">
              <el-button
                size="small"
                type="text"
                :disabled="checkPreview(row)"
                @click="handlePreview(row)"
              >点击预览</el-button>
            </template>

            <template slot-scope="{row}"
                      slot="source">
              <div style="text-align:center">
                <i :class="row.source" />
              </div>
            </template>
          </avue-crud>
        </div>

        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="handleDownload(2)" class="ju-btn" v-if="type == 1">全部下载</el-button>
          <el-button type="primary" @click="showReceiveList=false" class="ju-btn" v-if="type == 1">关闭</el-button>
        </span>

    </el-dialog>

    <ImagePreview
      :src="previewUrl"
      @previewClose="previewClose"
    />
  </div>
</template>

<script>
import ImagePreview from "@/components/ImagePreview"
import {getListByCode,downloadFile } from "@/api/file";
import { mapGetters } from 'vuex'

export default {
  name: "Editor",
  components: {
    ImagePreview
  },
  props: {
    code: {
      type: String || Number,
      default: "",
    },
    isShow: {
      type: Boolean,
      default: false
    },
    //需求来源1 ：接收文件    2：我的文件
    type: {
      type: Number,
      default: 1,
    },
  },
  data() {
    return {
      showReceiveList:false,
      receiveFileList:[],//接收的文件列表
      selectList:[],//
      fileListOption: {//图层列表
        tip: false,
        searchShow: false,
        border: false,
        index: false,
        searchShowBtn:false,//搜索按钮
        columnBtn: false,//列按钮
        refreshBtn:false,
        selection: false,
        viewBtn: false,
        editBtn:false,
        addBtn:false,
        delBtn:false,
        menuWidth: 80,
        emptyBtnText:'重置',
        emptyBtnIcon:'el-icon-refresh',
        dialogClickModal: false,
        menu:true,
        showHeader:false,
        column: [
          {
            label: "",
            prop: "oss",
            width:200,
            formatter:(val,value,label)=>{
              return val.oss.originalName
            }
          },
        ]
      },
      previewUrl:'',//预览的文件地址
    };
  },
  watch: {
    isShow(newVal, oldVal) {
      this.showReceiveList = newVal;
      if (newVal && this.code && this.code != '') {
        this.fileListOption.selection = this.type == 1?true:false;
        this.getFileByCode();
      }else{
        this.showReceiveList = false;
      }
    }
  },
  computed: {
    ...mapGetters([
      'userInfo',
    ]),
    styles() {
      let style = {};
      if (this.minHeight) {
        style.minHeight = `${this.minHeight}px`;
      }
      if (this.height) {
        style.height = `${this.height}px`;
      }
      return style;
    },
  },
  mounted() {

  },

  methods: {
    //根据获取文件列表 TODO
    async getFileByCode(){
      let params = {
        code:this.code,
        userId:this.userInfo.uid
      }
      try {
        const res = await getListByCode(params)
        this.showReceiveList = false;
        if (res.code == 200) {
          //显示接收到的文件列表
          this.showReceiveList = true;
          this.receiveFileList = res.data || [];

          setTimeout(() => {
            this.$nextTick(() => {
              this.$refs.crud.doLayout()
            })
          }, 50)

        } else {
          this.showReceiveList = false;
          this.$message.error(data.data.msg)
        }
      } catch (error) {
        console.log('error', error);
        this.showReceiveList = false;
      }
    },
    //校验文件类型，是否能预览
    checkPreview(row){
      let imgList = ['.png','.gif','.jpeg'];
      let currentType = row.oss.fileSuffix;
      let index = imgList.findIndex(item=>item == currentType)
      if(index != -1){
        return false;
      }else{
        return true;
      }
    },
    selectionChange(list){
      this.selectList = list
    },
    //文件预览
    handlePreview(row){
      this.$nextTick(() => {
        this.previewUrl = row.oss.url;
      })
    },
    previewClose(){
      this.$nextTick(() => {
        this.previewUrl = '';
      })
    },
    //下载文件 1:选中下载    2:全部下载
    handleDownload(type){
      let list = type == 1?this.selectList:this.receiveFileList;
      if(!list || list.length == 0)  return;
      list.forEach(e =>  {
        //downloadFile(e.oss.ossId)
        this.download(e);

      });
    },
    async download(e){
      let url = `https://www.filekc.com:17780/prod-api/system/oss/download/${e.id}` + '?t=' + new Date().getTime();
      window.open(url);
    },
    handleClose(){
      this.$emit('receiveClose')
    },
  },
};
</script>

<style scoped lang="scss">
   ::v-deep .successCode-dialog .el-dialog__header{
      margin-bottom: -10px;
    }
  .successCode-dialog{

    .success-content-box{
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      .mes1{
        display: block;
        font-family: "Arial Negreta", "Arial Normal", "Arial", sans-serif;
        font-weight: 700;
        font-style: normal;
        font-size: 22px;
        color: #333;
        text-align: center;
        line-height: 40px;
      }
      .mes2{
        display: block;
        text-align: center;
        line-height: 30px;
        span{
          color: #4191F5;
        }
      }
      .nums{
        display: flex;
        justify-self: center;
        align-items: center;
        margin: 20px 0;
        span{
          font-family: 'Arial Negreta', 'Arial Normal', 'Arial', sans-serif;
          font-weight: 700;
          font-style: normal;
          font-size: 36px;
          color: #00B2FF;
          display: block;
          margin:0 5px;
        }
        ::v-deep .el-input__inner{
          border: none;
          border-bottom: 1px solid #00B2FF;
          border-radius: 0;
          letter-spacing: 5px;
          font-family: 'Arial Negreta', 'Arial Normal', 'Arial', sans-serif;
          font-weight: 700;
          font-style: normal;
          font-size: 36px;
          color: #00B2FF;
          display: block;
          margin: 0 5px;
          width: 185px;
        }
      }
      .receiveWarning{
        color: #D9001B;
        background-color: rgb(254, 242, 245);
        border: none;
        border-radius: 5px;
        padding: 10px;
        font-size: 13px;
        width: 80%;
        line-height: 27px;
        margin: 10px 0 0 0;
        span{
          color: #2620DD;
          cursor: pointer;
        }
      }
      .receiteList-box{
        margin-top:20px;
        ::v-deep .avue-crud__body{
          border:none
        }
      }
    }

  }
  .ju-btn{
    background-color: #F9723D;
    border-color: #F9723D;
  }
</style>
